<template>
<div class="dashboard-container">
<el-card>
     <el-form label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input  v-model="randoms.keyword" placeholder="根据编号搜索" style="200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="12">
            <el-form-item style="text-align: right">
              <el-button @click="clear">清除</el-button>
              <el-button  @click="search" class="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-width="80px" size="small">
         <el-row>
            <!-- <el-col :span="12"> -->
           <el-alert
    :title="`数据一共${total}条`"
    type="info"
    show-icon :closable="false">
  </el-alert>
          <!-- </el-col> -->
         </el-row>
      </el-form>
</el-card>
<el-card>
   <el-form label-width="80px" size="small">
        <el-row>
          <el-col >
             <el-table
      :data="tableData"
      style="width: 100%">
<el-table-column label="编号" prop="id" width="220px"></el-table-column>
        <el-table-column label="题型" prop="questionType" width="80px" :formatter="formatterQuestionType">
            <!-- <template #default="{row}">
            {{
              questionType.find(
                (item) => item.value === +row.questionType
              ).label
            }}
          </template> -->
        </el-table-column>
<el-table-column label="题目编号" prop="questionIDs" width="220px">
   <template #default="{row}">
            <div v-for="item in row.questionIDs" :key="item.number">
              <a
                href="#"
                @click.prevent="openPreviewDialog(item)"
                style="color: #09f"
                >{{ item.number }}</a
              >
            </div>
          </template>
</el-table-column>
        <el-table-column label="录入时间"   width="220px">
           <template #default="{row}">
            {{ row.addDate | timeFormate }}
          </template>
        </el-table-column>
<el-table-column label="答题时间" prop="totalSeconds" width="150px"></el-table-column>
        <el-table-column label="正确率" prop="accuracyRate" width="150px">
        </el-table-column>
<el-table-column label="录入人" prop="userName" width="150px"></el-table-column>
        <el-table-column label="操作"  width="150px">
          <template #default="{row}">
            <el-button  icon="el-icon-delete" circle @click="delUser(row)" class="del"></el-button>
            </template>
        </el-table-column>
    </el-table>
          </el-col>
        </el-row>
      </el-form>
 <div class="block" style="text-align: right">
<span class="demonstration"></span>
    <el-pagination
    background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="randoms.page"
       :page-sizes="[20, 30, 50, 100]"
      :page-size="randoms.pagesize"
      layout="prev, pager, next,sizes,jumper"
      :total="total">
    </el-pagination>
  </div>
</el-card>
<questions-preview
      ref="questionPreview"
      :data="questionInfo"
    ></questions-preview>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview.vue'
// import { filter } from '@/filters'
export default {
  components: {
    // questionType,
    QuestionsPreview
  },
  methods: {
    formatterQuestionType (row, column, cellvalue, index) {
      return questionType.find(item => item.value === +cellvalue)?.label || '未知'
    },
    openPreviewDialog (questionInfo) {
      console.log(questionInfo)
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },

    // 组题列表接口
    async    getRandomsList () {
      const { data: questionsData } = await randoms(this.randoms)
      // console.log(questionsData)
      // const { page, pagesize } = questionsData
      // this.randoms.page = page
      // this.randoms.pagesize = pagesize
      this.tableData = questionsData.items

      this.total = questionsData.counts
      console.log(questionsData, 'getlist')
    },
    // 分页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.randoms.pagesize = val
      this.randoms.page = 1
      this.getRandomsList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.randoms.page = val
      this.getRandomsList()
    },
    delUser (row) {
      this.$confirm('此操作将永久删除该题组', '提示').then(async () => {
        await removeRandoms(row)
        this.$message.success('成功')
        // 边界处理
        /*   if (this.list.length === 1 && this.page > 1) {
          this.page--
        } */
        this.getRandomsList()
      })
    },
    clear () {
      this.getRandomsList()
      this.randoms.keyword = null
    },
    search () {
      // this.randoms.page = 1l
      this.getRandomsList()
    }

  },
  async created () {
    this.getRandomsList()
  },
  data () {
    return {
      difficulty,
      total: 0,
      questionInfo: {},
      questionType,
      randoms: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      input: '',
      tableData: [{
        id: '',
        questionType: '',
        questionIDs: '',
        addDate: '',
        totalSeconds: '',
        accuracyRate: '',
        userName: ''
      }],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  }

}

</script>

<style scoped>
.search{
  color: #fef0f0;
background-color:#409eff;
}
.search:hover{
  color: #fef0f0;
background-color:#78b8f8;
}
.del{
  color: #f56c6c;
  background-color: #fef0f0;
}

.del:hover{
   color: #fef0f0;
background-color: #f56c6c;
}
</style>
